import { useState } from "react";
import "./index.less";
import { RightOutlined } from '@ant-design/icons';

function ProfileList({setCurrPage}: any) {
  const [active, setActive] = useState(0);
  const itemList = [
    {
      icon: '/assets/icon/my_grzl@2x.png',
      title: '个人资料',
      name: 'profile'
    },
    {
      icon: '/assets/icon/my_mrqd@2x.png',
      title: '每日签到',
      name: 'qiandao'
    },
    {
      icon: '/assets/icon/my_smrz@2x.png',
      title: '实名认证',
      name: 'authentication'
    },
    {
      icon: '/assets/icon/my_yjfk@2x.png',
      title: '意见反馈',
      name: 'suggestion'
    },
    {
      icon: '/assets/icon/my_lxkf@2x.png',
      title: '联系客服',
      name: 'customerService'
    },
    {
      icon: '/assets/icon/my_xzlj@2x.png',
      title: '下载链接',
      name: 'downloadLink'
    },
    {
      icon: '/assets/icon/my_shezhi@2x.png',
      title: '设置',
      name: 'setting'
    }
  ];

  const handleChangeItem = (index: number, item: any) => {
    setActive(index);
    setCurrPage(item);
  };
  
  return (
    <>
      <div className="profile-list">
        <div className="profile-list-title text-style">
          个人中心
        </div>
        <div className="profile-list-content">
          {
            itemList.map((item, index) => {
              return (
                <div
                  key={ index }
                  className="profile-list-item"
                  style={{
                    backgroundColor: `${
                      active === index ? "#F5F5F5" : "transparent"
                    }`,
                  }}
                  onClick={() => handleChangeItem(index, item)}
                >
                  <div className="flex-center">
                    <img className="profile-list-item-icon" src={ item.icon } alt="" />
                    <div className="profile-list-item-title text-style">
                      { item.title }
                    </div>
                  </div>
                  <RightOutlined className="profile-list-item-arrow" />
                </div>
              )
            })
          }
        </div>
      </div>
    </>
  );
}

export default ProfileList;
